<template>
      <!-- 导航链接 -->
      <NavigationBar />
    <div class="customer-service">
      <h1>客服中心</h1>
      <div class="chat-container">
        <div class="chat-messages" ref="chatMessages">
          <!-- 显示聊天记录 -->
          <div v-for="message in messages" :key="message.id" class="message">
            <div :class="['message-content', message.from === 'user' ? 'user' : 'agent']">
              {{ message.text }}
            </div>
          </div>
        </div>
        <div class="chat-input">
          <input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="输入消息..." />
          <button @click="sendMessage">发送</button>
        </div>
            <!-- 底部信息 -->
    <Footer />
      </div>
    </div>
  </template>
  
  <script>
  import Footer from '@/components/Footer.vue';
import NavigationBar from '@/components/NavigationBar.vue';

  export default {
    name: 'CustomerService',
    components: {
    NavigationBar,
    Footer
  },
    data() {
      return {
        messages: [
          // 示例聊天记录
          { id: 1, from: 'agent', text: '您好，很高兴为您服务！' },
          // 更多聊天记录...
        ],
        newMessage: '',
      };
    },
    methods: {
      sendMessage() {
        if (this.newMessage.trim()) {
          const newMessage = {
            id: Date.now(),
            from: 'user',
            text: this.newMessage,
          };
          this.messages.push(newMessage);
          this.newMessage = '';
          this.scrollToBottom();
        }
      },
      scrollToBottom() {
        this.$nextTick(() => {
          const chatMessages = this.$refs.chatMessages;
          chatMessages.scrollTop = chatMessages.scrollHeight;
        });
      },
    },
    mounted() {
      this.scrollToBottom();
    },
  };
  </script>
  
  <style scoped>
  .customer-service {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 400px;
  }
  
  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
  }
  
  .message {
    margin: 5px 0;
  }
  
  .message-content {
    padding: 10px;
    border-radius: 5px;
    max-width: 70%;
  }
  
  .message-content.user {
    background-color: #007bff;
    color: white;
    align-self: flex-end;
  }
  
  .message-content.agent {
    background-color: #ddd;
    color: black;
    align-self: flex-start;
  }
  
  .chat-input {
    display: flex;
    align-items: center;
    padding: 10px;
  }
  
  .chat-input input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 10px;
  }
  
  .chat-input button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .chat-input button:hover {
    background-color: #0056b3;
  }
  </style>